<template>
	<view class="container">
		<button type="primary" v-if="JSON.stringify(address)==='{}'" @click="chooseaddr">单击获取收货地址</button>
		<!-- 如果有收货地址 -->
		<!-- 调整收货地址的布局    查-->
		<!-- 上方 -->
		<view class="address-container" v-else>
			<view class="address-top">
				<text>姓名:{{address.userName}}</text>
				<text>电话:{{address.telNumber}}</text>
			</view>
			<!-- 下方地址 -->
			<view class="address-bottom">
				<text>收货地址:{{address.provinceName+address.cityName+address.countyName}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapState
	} from "vuex"
	export default {
		name: "my-address",
		data() {
			return {}
		},
		// 计算属性
		computed: {
			// user.js中的address
			...mapState("m_user", ["address"]),
			// ...   扩展运算符 ： 形式上展开			
			// mapGetters("模块名",[getters中方法名,getters中方法名,...])
			...mapGetters("m_car", ["total"]),
			// mapGetters("getters中方法名","getters中方法名",...)

		},
		methods: {
			// 检测收货地址
			//  1`.弹出收货地址(授权取消)
			//   uni.showModal()
			//       单击取消  --  重新开启授权窗口
			//                    单击事件
			//       单击确定  --  授权
			//  2 .收货地址优化到state
			// 3. 实现本地存储
			async chooseaddr() {
				// const  res = await uni.chooseAddress().catch(err=>err)
				const [err, success] = await uni.chooseAddress().catch(err => err)
				// console.log(err);
				// console.log(success);
				// 练习
				// this.address = success						
				// 提交到user.js中
				this.$store.commit("m_user/updateaddress", success)
			}
		}
	}
</script>

<style lang="scss">
	.container {}
</style>